<template>
  <div v-if="!isLogin">
    <button @click="login">登录</button>
  </div>
  <div v-else>
    <h1>登录成功</h1>
    <h2>账号: {{ username }}</h2>
    <h2>密码: {{ password }}</h2>
    <h2>邮箱: {{ email }}</h2>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { userLogin } from './api.js'

const username = ref('')
const password = ref('')
const email = ref('')

const isLogin = ref(false)

const login = async() => {
  username.value = 'abc'
  password.value = '123'
  email.value = '123@qq.com'

  const res = await userLogin({username: username.value, password: password.value})
  console.log(res)
  const { access_token, refresh_token, userInfo } = res.data
  if (access_token) {
    isLogin.value = true
  }
  localStorage.setItem('access_token', access_token)
  localStorage.setItem('refresh_token', refresh_token)
}
</script>

<style lang="css" scoped>

</style>